import 'package:flutter/material.dart';

class KL_ExpandableButton extends StatefulWidget {
  const KL_ExpandableButton({super.key});

  @override
  State<KL_ExpandableButton> createState() => _KL_ExpandableButtonState();
}

class _KL_ExpandableButtonState extends State<KL_ExpandableButton>
    with SingleTickerProviderStateMixin {
  bool _isExpanded = false;

  void _toggleExpand() {
    setState(() {
      _isExpanded = !_isExpanded;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          width: 80,
          height: 40,
          alignment: Alignment.center,
          child: GestureDetector(
            onTap: _toggleExpand,
            child: Container(
              width: 60,
              height: 30,
              color: Colors.blue,
              alignment: Alignment.center,
              child: Text(
                'All',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
        AnimatedSize(
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeInOut,
          child: Container(
            width: 80,
            height: _isExpanded ? 250 : 0,
            color: Colors.grey[200],
            child: _isExpanded
                ? ListView.builder(
                    itemCount: 10,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title: Text('Item ${index + 1}'),
                      );
                    },
                  )
                : null,
          ),
        ),
      ],
    );
  }
}
